<template>
  <div class="c-interfaces-grouping" :class="this.getBorderRed()">
    <template v-for="indx in max / 2" >
      <div class="c-interfaces-grouping-min">
        <interfaceitem :status="status" :base="getitem( (indx - 1) * 2 + 1  ) "/>
          <br/>
        <interfaceitem overturn :base="getitem( (indx - 1) * 2 + 2 ) " :status="status"/>
      </div>
<!--      <br v-if="(indx && indx%24 === 0) || indx === max/2"/>-->
    </template>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import interfaceitem  from './interfaceitem.vue';
  export default defineComponent({
    name: 'grouping',
    components:{interfaceitem},
    props: {
      list: propTypes.array,
      status: propTypes.bool,
    },
    data(){
      return {
        max : this.getMax(),
        turnback : 0,
        turn : false,
        normalBase:{
          down:'/',
          up:'/',
          status:'0'
        }
      }
    },
    methods:{
      getitem(position){
        for(let i in this.list){
          if(position == this.list[i].position)
          return this.list[i]
        }
        return Object.assign({name:'离线设备'+position},this.normalBase)
      },
      getBorderRed(){
        var className = "border-blue";

          this.list.map(item=>{
            if (item.status === '2'){

              className =  'border-red'
            }
          })


        return className;
      },
      getMax(){
        let max = 0 ;
        this.list.map(item=>{
          item.position > max && (max = item.position)
        })
        max%2 != 0 && max ++

        return max
      }
    },
    setup() {
    }
  })
</script>
<style>
.c-interfaces-grouping{
  float: left;
  margin-bottom : 15px;
  /* width: 184px; */
  box-sizing: border-box;
  padding: 10px;
  /*background: #ccc;*/
  /*border: 4px solid #0eacef;*/
  border-radius: 10px;
}
.c-interfaces-grouping-min{
  float: left;
}

.border-red{
  border: 4px solid red;
}
.border-blue{
  border: 4px solid #0eacef;
}

</style>
